import React, { Component } from 'react'
// 引入store用于获取redux中保存的状态
import store from '../../redux/store';
// 引入action_creator,专门用来创建action对象
import {createIncrementAction,createDecrementAction} from '../../redux/count_action'

export default class Count extends Component {

  state ={carName:'奔驰'}

  // componentDidMount(){
  //   //监测redux状态的变化,只要变化就调用render
  //   store.subscribe(()=>{
  //     this.setState({})
  //   })
  // }

  increment = ()=>{
    const {value} = this.selectNumber
    // 通知redux加value
    store.dispatch(createIncrementAction(value*1))
  }

  decrement = ()=>{
    const {value} = this.selectNumber
    store.dispatch(createDecrementAction(value*1))
  }

  incrementOdd = ()=>{
    const {value} = this.selectNumber
    if (store.getState() % 2) {
      store.dispatch(createIncrementAction(value*1))
    }
  }

  incrementWait = ()=>{
    const {value} = this.selectNumber
    setTimeout(() => {
      store.dispatch(createIncrementAction(value*1))
    }, 1000);
  }


  render() {
    return (
      <div>
        <h1>当前求和为:{store.getState()}</h1>
        <select ref={(c)=>{this.selectNumber = c}}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={this.increment}>加</button>
        <button onClick={this.decrement}>减</button>
        <button onClick={this.incrementOdd}>奇数加</button>
        <button onClick={this.incrementWait}>等一等加</button>
      </div>
    )
  }
}
